import React from 'react';
import { Collapse, Box, Stack, Chip, Button } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import GitHubIcon from '@mui/icons-material/GitHub';
import { useAuth } from 'contexts/AuthContext';
import { useDashboardDrawerProtected } from 'contexts/DashboardDrawerProtectedContext';
import { styled, alpha } from '@mui/material/styles';

// Custom styled Chip component based on TreeItem styles
const TreeItemStyledChip = styled(Chip)(({ theme }) => {
  const accentColor = '#00fff2';
  const isDarkMode = theme.palette.mode === 'dark';
  
  return {
    height: 'auto',
    borderRadius: '10px',
    padding: '4px',
    transition: 'all 0.3s ease',
    minHeight: '32px',
    
    // Square with slightly rounded corners
    '& .MuiChip-label': {
      padding: '8px 12px',
      fontSize: '0.9rem',
      letterSpacing: '0.5px',
      transition: 'all 0.3s ease',
      color: isDarkMode ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 2, 3, 0.9)',
    },
    
    // Icon styling
    '& .MuiChip-icon': {
      marginLeft: '8px',
      transition: 'all 0.3s ease',
      fontSize: '1.2rem',
      color: isDarkMode ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 2, 3, 0.9)',
    },
    
    // Background gradient based on TreeItem
    ...(isDarkMode 
      ? {
          backgroundColor: 'transparent !important',
          background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))',
          boxShadow: 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)',
        }
      : {
          backgroundColor: 'transparent !important',
          background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
          boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
        }
    ),
    
    // Hover effects
    '&:hover': {
      ...(isDarkMode
        ? {
            background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))',
            boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.05), 0 0 15px rgba(0, 255, 242, 0.1)',
          }
        : {
            background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))',
            boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 20px rgba(223, 227, 238, 0.4)',
          }
      ),
      '& .MuiChip-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
      '& .MuiChip-icon': {
        color: accentColor,
        filter: `drop-shadow(0 0 6px ${alpha(accentColor, 0.4)})`,
      }
    },
  };
});

const MobileDrawer = ({ 
  in: isCollapseOpen = false, 
  sx = {
    width: {
      xs: '100%',
      sm: '600px',
      md: '960px',
      lg: '1280px',
      xl: '1920px'
    },
    zIndex: 1,
    color: 'text.primary',
  },
  paddingX = 2,
  toggleCollapseMenu,
  setMenuOpen,
  isPrivate = false,
  ...otherProps 
}) => {
  const navigate = useNavigate();
  
  // Get user from auth context with empty object fallback for safety
  const { user = {} } = useAuth();
  
  // Check if user is admin or superadmin
  const isAdmin = user?.role === 'admin' || user?.isAdmin === true || user?.role === 'superadmin';
  
  // Get dashboard drawer toggle function from context
  const { toggleDashboardDrawerProtected } = useDashboardDrawerProtected();

  const navigatePage = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const navigateOpen = (path) => {
    if (path === 'toggleCollapseMenu') {
      toggleCollapseMenu();
    } else if (path === 'toggleDashboardDrawerProtected') {
      toggleDashboardDrawerProtected();
    } else if (path.startsWith('http')) {
      navigatePage(path);
    } else {
      navigate(path);
      toggleCollapseMenu();
      setMenuOpen(false);
    }
  };

  return (
    <Collapse
      in={isCollapseOpen}
      sx={{
        ...sx,
        zIndex: sx.zIndex || 3000,
        color: sx.color || 'text.primary',
        border: 'none',
        boxShadow: 'none',
      }}
      {...otherProps}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'initial',
          transition: 'transform 1s ease',
          paddingY: 4,
          paddingX: paddingX,
          width: '100%',
        }}
      >
        <Box sx={{ 
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-end' // Align everything to the right
        }}>
          {/* Single Stack with all items */}
          <Stack spacing={1} sx={{ alignItems: 'flex-end' }}>
            {/* GitHub Links chips with TreeItem styling */}
            <TreeItemStyledChip 
              icon={<GitHubIcon />}
              label="Go API"
              onClick={() => navigateOpen('https://github.com/startersaas/startersaas-backend-go-api-main.git')}
              variant="outlined"
              size="medium"
            />
            <TreeItemStyledChip 
              icon={<GitHubIcon />}
              label="Node API"
              onClick={() => navigateOpen('https://github.com/startersaas/startersaas-backend-node-api-main.git')}
              variant="outlined"
              size="medium"
            />
            <TreeItemStyledChip 
              icon={<GitHubIcon />}
              label="React API"
              onClick={() => navigateOpen('https://github.com/startersaas/startersaas-frontend-react-spa.git')}
              variant="outlined"
              size="medium"
              sx={{ mb: 1 }} // Larger margin before buttons
            />
            
            {/* Dashboard Buttons for admin or Login button for non-admin */}
            {isAdmin ? (
              <>
                <Button 
                  variant="contained" 
                  size="small" 
                  onClick={() => navigateOpen('/dashboard')}
                  sx={{ mb: 1, borderRadius: '10px', minHeight: '32px', py: 0.8 }}
                >
                  Dashboard
                </Button>
                <Button 
                  variant="contained" 
                  size="small" 
                  onClick={() => navigateOpen('toggleDashboardDrawerProtected')}
                  sx={{ borderRadius: '10px', minHeight: '32px', py: 0.8 }}
                >
                  Protected Dashboard
                </Button>
              </>
            ) : (
              <Button 
                variant="contained" 
                size="small" 
                onClick={() => navigateOpen('/auth/login')}
                sx={{ borderRadius: '10px', minHeight: '32px', py: 0.8 }}
              >
                Login
              </Button>
            )}
          </Stack>
        </Box>
      </Box>
    </Collapse>
  );
};

export default MobileDrawer;